<template>
  <div class="work-type-stats left-back">
    <a-table
      :columns="columns"
      :data-source="filteredData"
      :pagination="false"
      :loading="loading"
      :bordered="false"
      size="small"
      :rowClassName="() => 'table-row-with-spacing'"
      :scroll="{ y: 240 }"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'type'">
          <span class="highlight">{{ text }}</span>
        </template>
        <template v-if="column.dataIndex === 'total'">
          <span class="highlight1">{{ text }}</span>
        </template>
        <template v-if="column.dataIndex === 'attendance'">
          <span class="highlight2">{{ text }}</span>
        </template>
        <template v-if="column.dataIndex === 'attendanceTotal'">
          <span class="highlight3">{{ text }}</span>
        </template>

      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getTypeWorkerStatic } from "@/js/api/businessApi.js"
// const props = defineProps({
//   data: {
//     type: Array,
//     default: () => [
//       { key: '1', id: '01', type: '钢筋工', count: 121 },
//       { key: '2', id: '02', type: '木工', count: 98 },
//       { key: '3', id: '03', type: '泥工', count: 85 },
//       { key: '4', id: '04', type: '电工', count: 76 },
//       { key: '5', id: '05', type: '焊工', count: 62 }
//     ]
//   },
//   loading: {
//     type: Boolean,
//     default: false
//   }
// })
const loading = ref(false);
const emit = defineEmits(['showDetail'])

const searchText = ref('')

const columns = [
  {
    title: '工种类型',
    dataIndex: 'type',
    width: 120,
    align: 'center',
  },
  {
    title: '总人数',
    dataIndex: 'total',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.total - b.total,
  },
  {
    title: '出勤人数',
    dataIndex: 'attendance',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.attendance - b.attendance,
  },
  {
    title: '出勤率',
    dataIndex: 'attendanceTotal',
    width: 100,
    align: 'center',
    sorter: (a, b) => a.attendanceTotal - b.attendanceTotal,
  },
]

const filteredData = ref([])

const handleSearch = () => {
  // 可以在这里添加搜索逻辑
}

const showDetail = (record) => {
  emit('showDetail', record)
}
const initData = function(){
  getTypeWorkerStatic({"projectId": "19"}).then((data)=>{
    console.log(data);
    if(data.data){
      const list = data.data.map((item,index)=>{
      return {
          key: index + 1,
          type: item.type,
          total: item.total || 0,
          attendance: item.attendance || 0,
          attendanceTotal:  item.attendance && item.total ? (item.attendance) / (item.total) * 100 : 0
        }
      })
      if(list){
        list.sort((a,b)=>b.attendanceTotal - a.attendanceTotal);
        filteredData.value = list;
      }
    }
  })
}
onMounted(()=>{
  initData();
})
</script>

<style scoped>
.work-type-stats {
  border-radius: 8px;
  padding: 1.5vh;
  height: calc(25vh - 2vh);
  display: flex;
  flex-direction: column;
}

.work-type-stats h3 {
  margin: 0 0 15px 0;
  color: #409EFF;
  font-size: 16px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.highlight {
  color: #409EFF;
  font-weight: bold;
}

:deep(.ant-table) {
  background-color: transparent;
  color: #fff;
}

:deep(.ant-table-thead > tr > th) {
  background:transparent !important;
  /* background-size: 100% 100%; */
  background-size: 212% 68%;
    color: #fff !important;
    background-position-y: 15px;
    border-bottom: 0px solid #f0f0f0;
}

:deep(.ant-table-tbody > tr > td) {

  background-color: transparent !important;
  color: #fff;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
</style> 